import React, { useEffect, useRef, useState } from "react";
import { intl } from '@/utils';
import { useModel } from 'umi';
import { CpasIcon, DevToolBar } from '~/public/cpas-ui';
import { Item } from 'devextreme-react/toolbar';
import { SelectBox, TextBox } from "devextreme-react";
import AddUnderProject from "./components/AddUnderProject";
import { Select } from "antd";
import ToResetMonth from "../ToResetMonth";


const ProjectToolBar: React.FC<any> = React.forwardRef((props: any, ref) => {

    const { initialState } = useModel('@@initialState');
    const { dbname } = initialState?.curPart as API.CurPart;

    const { AccountData, onSelectionChanged } = props

    const Divstyle: React.CSSProperties = { display: 'flex', alignItems: "center", justifyContent: "center", };
    const Titlestyle: React.CSSProperties = { marginRight: "8px" }

    const [SelectValue, setSelectValue] = useState<string | null>('')
    const [TextValue, setTextValue] = useState<any>('')
    const [TextData_ID, setTextData_ID] = useState<string>('')
    const ProjectAddRef = useRef<any>()
    const ToResetRef = useRef<any>()

    useEffect(() => {
        const v = window.localStorage.getItem('DefaultAccount')
        setSelectValue(v)
        const r = window.localStorage.getItem('setTextValue')
        setTextValue(r)
    }, [SelectValue])

    const MenuOptions = {
        items: [
            {
                icon: "iconfont icon-zhangbiaotiaozheng",
                text: '账表调整',
                items: [
                    {
                        ID: '0',
                        icon: 'iconfont icon-fujiagongneng',
                        text: '重分类',
                    },
                    {
                        ID: '1',
                        icon: 'iconfont icon-fujiagongneng',
                        text: '损益结转',
                    },
                ],
            },
        ],
        onItemClick: (e: any) => {
            switch (e.itemData.ID) {
                case '0': {
                    console.log(1);
                };
                    break;
            }
        },
    };

    const ProjectMenu = {
        items: [
            {
                icon: "iconfont icon-baobiaoxiangmubianji",
                text: '报表项目编辑',
                items: [
                    {
                        ID: '0',
                        icon: 'iconfont icon-xinzengtongji',
                        text: '新增同级',
                    },
                    {
                        ID: '1',
                        icon: 'iconfont icon-xinzengxiaji',
                        text: '新增下级',
                    },
                    {
                        ID: '2',
                        icon: 'iconfont icon-rename-copy',
                        text: '编辑',
                    },
                    {
                        ID: '3',
                        icon: 'iconfont icon-delete',
                        text: '删除',
                    },
                ],
            },
        ],
        onItemClick: (e: any) => {
            switch (e.itemData.ID) {
                case '0': {
                    console.log(1);
                };
                    break;
                case '1': {
                    ProjectAddRef.current.show({
                        args: {
                            title: '报表项目编辑',
                            codes: true,
                            // data: res
                        },
                    });
                };
                    break;
            }
        },
    };

    const onSelectionChangeds = (e: any, v: any) => {
        onSelectionChanged(e, v)
        // 判断 账套里面没有截止日期 使用接口获取
        if (v.byMonth) {
            setTextValue(v.byMonth)
        }
        window.localStorage.setItem('setTextValue', v.byMonth)
        window.localStorage.setItem('DefaultAccount', e)
        window.localStorage.setItem('Data_Id', v.Data_ID)
        setTextData_ID(v.Data_ID)
        setSelectValue(e)
    }

    function Content(r: string) {
        setTextValue(r)
    }
    return (
        <>
            <DevToolBar.Default className='ItemStyle'>
                <Item location="before" >
                    <div style={Divstyle}>
                        <div style={Titlestyle}>{intl('report.subject.account', '账套:')}</div>
                        <Select
                            value={SelectValue}
                            style={{ width: 200 }}
                            className='AntdSelect'
                            options={(AccountData || []).map((d: any) => ({
                                value: d.displayName,
                                label: d.displayName,
                                Data_ID: d.Data_ID,
                                byMonth: d.byMonth,
                                ND: d.Data_ID
                            }))}
                            onChange={onSelectionChangeds}
                        />
                    </div>
                </Item>
                <Item location="before">
                    <div style={Divstyle}>
                        <div style={Titlestyle}>{intl('report.subject.EndMonth', '截止月份:')}</div>
                        <TextBox style={{ position: 'relative' }} value={TextValue} defaultValue={TextValue} width={90} placeholder="选择...">  {/*  defaultValue={PaperData.byMonth} */}
                            <span style={{ position: 'absolute', right: "5px", top: '5px', zIndex: "2" }}>
                                <CpasIcon type='icon-yuefenzhongzhi' onClick={() => {
                                    ToResetRef.current.show({
                                        args: { title: '重新设置截止月份' }
                                    }, TextValue ? TextValue.toString() : '');
                                }}
                                />
                            </span>
                        </TextBox>
                    </div>
                </Item>
                <Item widget="dxMenu" location="before" options={ProjectMenu} cssClass="StatementMenu" />
                <Item location="before">
                    <div style={Divstyle}>
                        <CpasIcon type="icon-zhongzhipeizhi" fontSize={18} />  <span style={{ marginLeft: "10px" }}>重置配置关系</span>
                    </div>
                </Item>

                <Item location="before">
                    <div style={Divstyle}>
                        <CpasIcon type="icon-duiyingcankao" fontSize={18} />  <span style={{ marginLeft: "10px" }}>参考对应</span>
                    </div>
                </Item>
                <Item widget="dxMenu" location="before" options={MenuOptions} cssClass="StatementMenu" />
                <Item location="before">
                    <div style={Divstyle}>
                        <CpasIcon type="icon-biaojijiezhuanpingzheng" fontSize={18} />  <span style={{ marginLeft: "10px" }}>标记结转凭证</span>
                    </div>
                </Item>
                <Item location="after" >
                    <div style={Divstyle}>
                        <CpasIcon type='icon-refresh' fontSize={16} onClick={() => {
                            console.log("刷新");
                        }} /><span style={{ marginLeft: "10px" }}>刷新</span>
                    </div>
                </Item>
            </DevToolBar.Default>
            <AddUnderProject ref={ProjectAddRef} />
            <ToResetMonth ref={ToResetRef} TextValue={TextValue} Content={Content} Data_ID={TextData_ID} />
        </>
    )
});

export default ProjectToolBar;